<div class="showcase-3-v6 relative" *reqRolesIf="content">
  @if (content) {
    <app-text [attr.data-path]="'title'" [content]="content.title" />
    <div class="showcase-inner flex flex-wrap justify-center items-center">
      @for (item of content.elements; track item; let i = $index) {
        <div class="flex flex-wrap flex-12/12 md:flex-{{ content.row }}/12">
          <app-media-object
            [attr.data-path]="'elements.' + i"
            class="p-x-xs p-y-xs block w-full"
            [content]="item"
          />
        </div>
      }
      @if (content.action) {
        <div class="actions flex justify-center items-center">
          <div class="m-y">
            <app-dynamic-component [attr.data-path]="'action'" [inputs]="content.action" />
          </div>
        </div>
      }
    </div>
  }
</div>
